require.config({
    baseUrl: '../js/library', // 基础路径
    paths: {
        jquery: 'jquery',
        axios: 'axios',
        cookie: 'cookie'
    },
    shim: {}
});

require(['cookie', 'axios', 'jquery'], function (cookie, axios, $) {
    $.ajax({
        url: '../shop/all_id',
        type: 'get',
        data: {
            id: location.search.split('=')[1]
        },
        dataType: 'json'
    })
        .then(val => {
            console.log(val[0]);
            let strsum = '';
            $('#name1').html(val[0].name);
            $('#imgbig').attr('src', `../${val[0].imgbig}`);
            $('#spxx>h1').html(val[0].name);
            $('#title').html(val[0].title);

            $('#spxx>.wz1').html(val[0].title1);
            $('#spxx>.wz2').html(val[0].title2);
            $('#spxx>.wz4').html(`<strong>${val[0].price}元</strong>`);
            $('#zjjg').html(`总计:${val[0].price}元`);

            JSON.parse(val[0].edition).forEach(e => {
                $('#xzbb').append(`<li>${e}</li>`);
            });
            $('#xzbb>li').eq(0).addClass('active2');
            JSON.parse(val[0].color).forEach(e => {
                $('#xzys').append(`<li>${e}</li>`);
            });
            $('#xzys>li').eq(0).addClass('active2');
            yx();
        })
        .catch(xhr => {
            console.log(xhr.status);
        });

    function yx() {
        let str = '';
        let str1 = '';
        $('#spxx>.xzlb>ul>li').each(function () {
            let _index = $('#spxx>.xzlb>ul>li').index(this);
            let flag = $('#spxx>.xzlb>ul>li').eq(_index).attr('class') == 'active2';
            if (flag) {
                console.log();
                str1 = str1 + ' ' + $('#spxx>.xzlb>ul>li').eq(_index).html();
            }
        });

        str = ` <li class="clear_fix">
                                <span class="xx">${$('#spxx>h1').html()}${str1} </span>
                                <span class="jg">${$('#mrjg').html()}</span>
                            </li>`;
        $('#gwlb').html(str);

        $('.bt>.clear_fix>li').on('mouseover', function () {
            let _index = $('.bt>.clear_fix>li').index(this);
            $('#box>.warpper>ul').eq(_index).addClass('display').siblings().removeClass('display');
        });

        $(window).scroll(function (e) {
            if ($(this).scrollTop() >= 800) {
                $('#hddb').addClass('display');
            } else {
                $('#hddb').removeClass('display');
            }
        });

        $('#hddb').on('click', function () {
            $(window).scrollTop(0);
        });

        $('#spxx>.xzlb>ul>li').on('click', function () {
            let _index = $('#spxx>.xzlb>ul>li').index(this);
            console.log(_index);
            $('#spxx>.xzlb>ul>li').eq(_index).addClass('active2').siblings().removeClass('active2');
            let str = '';
            let str1 = '';
            $('#spxx>.xzlb>ul>li').each(function () {
                let _index = $('#spxx>.xzlb>ul>li').index(this);
                let flag = $('#spxx>.xzlb>ul>li').eq(_index).attr('class') == 'active2';
                if (flag) {
                    console.log();
                    str1 = str1 + ' ' + $('#spxx>.xzlb>ul>li').eq(_index).html();
                }
            });

            str = ` <li class="clear_fix">
                                    <span class="xx">${$('#spxx>h1').html()}${str1} </span>
                                    <span class="jg">${$('#mrjg').html()}</span>
                                </li>`;
            $('#gwlb').html(str);
        });
        $('#spxx>.zzfw>.fwxx>li').on('click', function () {
            let _index = $('#spxx>.zzfw>.fwxx>li').index(this);
            let flag = $('#spxx>.zzfw>.fwxx>li').eq(_index).children('input').attr('checked') == 'checked';
            if (flag) {
                $('#spxx>.zzfw>.fwxx>li').eq(_index).children('input').removeAttr('checked');
                $('#spxx>.zzfw>.fwxx>li').eq(_index).children('div').children('div').children('input').removeAttr('checked');
                $('#spxx>.zzfw>.fwxx>li').eq(_index).removeClass('active2');
            } else {
                $('#spxx>.zzfw>.fwxx>li').eq(_index).children('input').attr('checked', 'true');

                $('#spxx>.zzfw>.fwxx>li').eq(_index).children('div').children('div').children('input').attr('checked', 'checked');
                $('#spxx>.zzfw>.fwxx>li').eq(_index).siblings().children('div').children('div').children('input').removeAttr('checked');

                $('#spxx>.zzfw>.fwxx>li').eq(_index).siblings().children('input').removeAttr('checked');
                $('#spxx>.zzfw>.fwxx>li').eq(_index).addClass('active2').siblings().removeClass('active2');
            }

            let str = '';
            let str1 = '';
            $('#spxx>.xzlb>ul>li').each(function () {
                let _index = $('#spxx>.xzlb>ul>li').index(this);
                let flag = $('#spxx>.xzlb>ul>li').eq(_index).attr('class') == 'active2';
                if (flag) {
                    console.log();
                    str1 = str1 + ' ' + $('#spxx>.xzlb>ul>li').eq(_index).html();
                }
            });

            str = ` <li class="clear_fix">
                                    <span class="xx">${$('#spxx>h1').html()}${str1} </span>
                                    <span class="jg">${$('#mrjg').html()}</span>
                                </li>`;
            let sum = parseInt($('#mrjg').children('strong').html());
            $('#spxx>.zzfw>.fwxx>li').each(function () {
                let _index = $('#spxx>.zzfw>.fwxx>li').index(this);
                let flag = $('#spxx>.zzfw>.fwxx>li').eq(_index).children('input').attr('checked') == 'checked';
                if (flag) {
                    let name = $('#spxx>.zzfw>.fwxx>li').eq(_index).children('div').children('h1').children('strong').html();
                    let jg = parseInt($('#spxx>.zzfw>.fwxx>li').eq(_index).children('span').html().match(/\d+/));
                    sum = sum + jg;
                    str =
                        str +
                        ` <li class="clear_fix">
                        <span class="xx">${name}</span>
                        <span class="jg">${jg}元</span>
                    </li>`;
                }
            });

            $('#gwlb').html(str);
            $('#zjjg').html(` 总计：${sum}元`);
        });
    }

    $('#jrgwc').on('click', function () {
        addItem(location.search.split('=')[1], 1);
        window.location = './gwc.html';
    });

    function addItem(id, num) {
        let shop = cookie.get('shop');
        let product = {
            id,
            num
        };
        if (shop) {
            shop = JSON.parse(shop);
            if (shop.some(el => el.id === id)) {
                let _index = shop.findIndex(elm => elm.id == id);
                let count = parseInt(shop[_index].num);
                count += parseInt(num);
                shop[_index].num = count;
            } else {
                shop.push(product);
            }
        } else {
            shop = [];
            shop.push(product);
        }

        cookie.set('shop', JSON.stringify(shop), 3);
    }
});
